<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>穷人穷party穷过</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			width: 100%;
			height: 100%;
			background-color: skyblue;
		}

		.cake {
			margin-top: 50px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-flow: column nowrap;
			align-items: center;
		}

		.floor {
			border: 10px solid #000;
			border-radius: 30px 30px 0 0;
		}

		.first-floor {
			overflow: hidden;
			position: relative;
			height: 120px;
			width: 360px;
			transform: translateY(9px);
			background-color: rgb(254, 250, 232);
			box-sizing: border-box;
		}

		.first-floor .wave {
			width: 120%;
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			height: 30px;
			background-color: #fff;
		}

		.first-floor .wave::before,
		.first-floor .wave::after {
			content: '';
			position: absolute;
			height: 50px;
			border-radius: 50%;
			width: 50%;
			border-width: 10px;
			border-style: solid;
		}

		.first-floor .wave::before {
			transform: translate(-15px);
			border-color: transparent transparent #000 transparent;
			background-color: #fff;
		}

		.first-floor .wave::after {
			transform: translateY(15px);
			border-color: #000 transparent transparent transparent;
			right: 0;
			background-color: rgb(254, 250, 232);
		}

		.second-floor {
			overflow: hidden;
			height: 160px;
			width: 500px;
			background-color: rgb(96, 56, 17);

		}

		.second-floor .wave {
			position: relative;
			transform: translateX(-10px);
			width: 128%;
			display: flex;
			justify-content: center;
			padding-bottom: 30px;
		}

		.second-floor .wave::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 20px;
			background-color: #fff;
		}

		.second-floor .wave div {
			border-color: transparent #000 #000 transparent;
			border-width: 10px;
			border-style: solid;
			border-radius: 50%;
			height: 30px;
			width: 30px;
			transform: rotateZ(45deg);
			background-color: #fff;
		}

		/* 蜡烛开始 */
		.name {
			position: absolute;
			top: -90px;
			left: 50%;
			transform: translateX(-50%);
			background-image: repeating-linear-gradient(45deg, pink, pink 8px, #fff 8px, #fff 16px);
			background-clip: text;
		}

		.name span {
			font-size: 90px;
			font-family: microsoft yahei;
			font-weight: bold;
			-webkit-text-stroke: 3px pink;
			color: transparent;
			-webkit-text-fill-color: transparent;
		}

		/* 蜡烛结束 */

		/* 火焰开始 */
		.fire-group {
			transform: translateY(-60px);
			width: 400px;
			display: flex;
			justify-content: space-between;
		}

		.fire {
			position: absolute;
			top: -10px;
			animation: flicker .5s ease-in infinite;
			transform-origin: bottom;
		}

		.fire-box {
			display: flex;
			justify-content: center;
			align-items: flex-end;
			transform: scaleX(.8);
		}

		.red {
			width: 50px;
			height: 50px;
			background: orangered;
			box-shadow: 0px 0px 10px 5px orangered;
		}

		.orange {
			width: 40px;
			height: 40px;
			background: orange;
			box-shadow: 0px 0px 12px 6px orange;
		}

		.white {
			width: 20px;
			height: 20px;
			background: #fff;
			box-shadow: 0px 0px 9px 4px #fff;
		}

		.fire {
			position: relative;
			margin: auto;
		}

		.base {
			bottom: 0;
			position: absolute;
			border-radius: 50% 0% 50% 50%;
			transform: rotate(-45deg);
		}

		@keyframes flicker {
			20% {
				transform: rotate(2deg) scaleY(1.05);
			}

			80% {
				transform: rotate(-1deg) scaleY(0.90);
			}
		}

		/* 火焰结束 */

		/* お誕生日に */
		.oiwai {
			margin: 20px;
			color: #fff;
			font-size: 100px;
			font-weight: bold;
			-webkit-text-stroke: 3px #000;
			z-index: 1;
		}

		.ganjizi {
			position: absolute;
			right: 0;
			transform: rotateZ(30deg) translateY(124px);
			background-image: repeating-linear-gradient(45deg, deeppink, deeppink 16px, #fff 16px, #fff 32px);
			background-clip: text;
			font-size: 80px;
			font-family: microsoft yahei;
			font-weight: bold;
			-webkit-text-stroke: 3px deeppink;
			color: transparent;
			-webkit-text-fill-color: transparent;
			z-index: 1;
		}
	</style>
</head>

<body>
	<div class="oiwai">お誕生日に</div>
	<div class="ganjizi">桌啊你又老了~</div>
	<div class="cake">
		<div class="candle">
			<div class="fire-group">
				<div class="fire">
					<div class="fire-box">
						<div class="base red"></div>
						<div class="base orange"></div>
						<div class="base white"></div>
					</div>
				</div>
				<div class="fire">
					<div class="fire-box">
						<div class="base red"></div>
						<div class="base orange"></div>
						<div class="base white"></div>
					</div>
				</div>
			</div>
			<div class="name">
				<span>ZHUO</span>
			</div>
		</div>
		<div class="floor first-floor">
			<div class="wave"></div>
		</div>
		<div class="floor second-floor">
			<div class="wave"></div>
		</div>
	</div>
	<script>
		let waveBox = document.querySelector('.second-floor .wave');
		for (let i = 0; i < 13; i++) {
			let wave = document.createElement('div');
			waveBox.appendChild(wave);
		}
		let arrWave = document.querySelectorAll('.wave div');
		for (let i in arrWave) {
			arrWave[i].style.transform = `rotateZ(45deg) translate(-${i * 6}px, ${i * 6}px)`;
		}
	</script>
</body>

</html>